<template>
    <div class="report-pic-list-wrap">
        <el-row :gutter="20">
            <el-col v-for="(item, i) in listData" :span="6" :key="i">
                <div class="report-pic-list-item" :class="{'active': selectPic===item}">
                    <el-image
                        style="width: 100%; height: 100%"
                        :src="item"
                        @click="selected(i, item)">
                        <div slot="placeholder" class="image-slot">
                            加载中<span class="dot">...</span>
                        </div>
                    </el-image>
                    <label class="selected-flag"><i class="el-icon-upload-success el-icon-check"></i></label>
                </div>
            </el-col>
        </el-row>
        <p v-if="listData.length == 0" class="text-center">暂无图片</p>
        <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page.sync="currentPage"
            :page-sizes="[8, 16, 32]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>
<script>
import { getWorkPicList } from '@/api/maintenanceReport'

export default {
    name: 'PicList',
    props: ['parames', 'changeType', 'setPic'],
    data() {
        return {
            listData: [],
            // 分页
            currentPage: 1,
            pageSize: 8,
            total: 0,
            selectPic: ''
        }
    },
    created() {
        let that = this
        if(that.changeType == 0) {
            that.selectPic = that.parames.preWorkPicUrl
        } else {
            that.selectPic = that.parames.postWorkPicUrl
        }
        that.getTableData()
    },
    methods: {
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            let parames = {
                startTime: that.parames.startTime,
                endTime: that.parames.endTime,
                id: that.parames.id,
                detailId: that.parames.detailId || '',
                type: that.parames.type,
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize,
                changeType: that.changeType
            }
            // 获取图片列表
            getWorkPicList(parames).then(res => {
                if(res.status === 200 && res.data) {
                    that.listData = res.data
                    that.total = res.total
                }
                that.loading = false
            })
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize, true)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage, this.pageSize, true)
        },
        // 选择图片
        selected(i, item) {
            this.selectPic = item
            // 更换图片
            this.setPic(item)
        }
    }
}
</script>
<style lang="scss">
.report-pic-list-wrap {
    .report-pic-list-item {
        position: relative;
        margin-bottom: 15px;
        width: 110px;
        height: 110px;
        overflow: hidden;
        .el-image {
            cursor: pointer;
        }
        .selected-flag {
            display: none;
            position: absolute;
            right: -17px;
            top: -7px;
            width: 46px;
            height: 26px;
            background: #13ce66;
            text-align: center;
            transform: rotate(45deg);
            box-shadow: 0 1px 1px #ccc;
            i {
                font-size: 12px;
                margin-top: 12px;
                transform: rotate(-45deg);
                color: #fff;
            }
        }
        &.active {
            border: 3px solid #13ce66;
            .selected-flag {
                display: block;
            }
        }
    }
}
</style>